<template>
  <el-dialog
      v-model="isShowMapDialog"
      width="85%"
      height="85%"
      :before-close="handleClose"
  >
    <!-- 全屏按钮 -->
    <div class="dialog-header">
      <el-button @click="handleFullscreen" style="float: right;">
        {{ isFullscreen ? '退出全屏' : '全屏' }}
      </el-button>
    </div>

    <iframe
        ref="iframeRef"
        :src="externalUrl"      style="width: 100%; height: 600px; border: none;"
    ></iframe>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const isShowMapDialog = ref(false);
const externalUrl = ref('https://map.libiaorobot.com/map');
const iframeRef = ref(null); // iframe元素引用
const isFullscreen = ref(false); // 全屏状态标识

// 全屏切换方法
const handleFullscreen = () => {
  const element = iframeRef.value;
  if (document.fullscreenElement) {
    // 退出全屏
    document.exitFullscreen();
    isFullscreen.value = false;
  } else {
    // 进入全屏
    if (element?.requestFullscreen) {
      element.requestFullscreen()
          .then(() => {
            isFullscreen.value = true;
          })
          .catch(() => {
            console.error('无法进入全屏模式');
          });
    }
  }
};

// 监听全屏状态变化
const handleFullscreenChange = () => {
  if (!document.fullscreenElement) {
    isFullscreen.value = false;
  }
};

// 生命周期钩子
onMounted(() => {
  document.addEventListener('fullscreenchange', handleFullscreenChange);
});

onUnmounted(() => {
  document.removeEventListener('fullscreenchange', handleFullscreenChange);
});

// 原有方法保持不变
const handleClose = () => {
  isShowMapDialog.value = false;
};

const openMapDialog = () => {
  isShowMapDialog.value = true;
};

defineExpose({
  openMapDialog,
});
</script>
<style scoped>/* 全屏时的样式覆盖 */
:fullscreen {
  background-color: white !important; /* 设置背景透明 */
}

/* 如果需要保持原有弹窗背景 */
:fullscreen .el-dialog__body {
  background-color: white; /* 恢复弹窗背景颜色 */
}

/* 确保iframe全屏时占满整个屏幕 */
:fullscreen iframe {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}
</style>
